什么是 Fetch API
Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
为什么要使用 Fetch
网络异步获取资源之前是用XMLHttpRequest
(例如常见的 jquery.ajax(),axios 都是这种)获取的,Fetch 提供了一个更好的替代方法。现代浏览器基本都内置了,不用额外引入,IE 也可以使用 polyfill 等一堆插件解决,其他浏览器开箱即用。
为什么要封装 Fetch
- 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。
- 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
- 还有最重要的一点,不用每次都写一堆代码。
不了解 Fetch 使用方法的这里提供一下MDN 的教程
简易代码 源码使用了 TypeScript 和 async/await
// fetch-config.ts
import Qs from 'qs'
export enum ContentType {
json = 'application/json;charset=UTF-8',
form = 'application/x-www-form-urlencoded; charset=UTF-8'
}
export enum HttpMethod {
get = 'GET',
post = 'POST',
put = 'PUT',
patch = 'PATCH',
delete = 'DELETE'
}
export interface IReqConfig {
body?: any
method?: string
headers?: IHeader
token?: string
'Content-Type'?: string
}
export interface IHeader {
'Content-Type': string
'X-Requested-With': string
token: string
[propName: string]: any
}
export const baseUrl = '/'
const $req = async (url: string, config: IReqConfig) => {
let promise: Response
let contentType: string
if (config['Content-Type'] !== undefined) {
contentType = config['Content-Type']
} else if (config.method === HttpMethod.post) {
contentType = ContentType.form
} else {
contentType = ContentType.json
}
const reqUrl = (baseUrl + url).replace('//', '/')
const headers: Headers = new Headers({
// 如果实例配置没传token过来的话,直接使用保存在sessionStorage的token
// 这里假设后端直接读头文件的token字段,我直接用token当字段了,Authorization也同理
token: config.token === undefined ? sessionStorage.token : config.token,
'Content-Type': contentType
} as IHeader)
if (!config.method || config.method === HttpMethod.get) {
promise = await fetch(reqUrl, {
headers
})
} else if (config.method === HttpMethod.post) {
promise = await fetch(reqUrl, {
body: Qs.stringify(config.body),
headers,
method: HttpMethod.post
})
} else {
promise = await fetch(reqUrl, {
body: JSON.stringify(config.body),
headers,
method: config.method
})
}
return handleRes(promise)
}
const handleRes = async (res: Response) => {
const parsedRes = await parseRes(res)
// 如果res.ok,则请求成功
if (res.ok) {
return parsedRes
}
// 请求失败,返回解析之后的失败的数据
const error = parsedRes
throw error
}
const parseRes = async (res: Response) => {
const contentType = res.headers.get('Content-Type')
// 判定返回的内容类型,做不同的处理
if (contentType) {
if (contentType.indexOf('json') > -1) {
return await res.json()
}
if (contentType.indexOf('text') > -1) {
return await res.text()
}
if (contentType.indexOf('form') > -1) {
return await res.formData()
}
if (contentType.indexOf('video') > -1) {
return await res.blob()
}
}
return await res.text()
}
export default $req
使用的时候
// test.ts
import $req, { HttpMethod } from './fetch-config'
async function getMethod() {
const getUrl: string = 'XXXX'
try {
const res: any = await $req(getUrl)
} catch(e) {
// 处理异常
}
}
async function postMethod() {
const postUrl: string = 'XXXX'
const reqBody: any = {/* request body */}
try {
const res: any = await $req(postUrl, {
body: reqBody,
method: HttpMethod.post
})
} catch(e) {
// 处理异常
}
}
async function patchMethod() {
const patchUrl: string = 'XXXX'
const reqBody: any = {/* request body */}
try {
const res: any = await $req(patchUrl, {
body: reqBody,
method: HttpMethod.patch
})
} catch(e) {
// 处理异常
}
}
以上就是 fetch API 的简单封装,如果用的 JavaScript 的话,把类型和枚举去掉就好,没什么差别
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。